<template>
	<view>
    <u-navbar :title="titleText" :immersive="true" height="44" :background="scHeight > 0 ? background : ''"   back-icon-color="#000" :is-back="true" title-color="#000"
              :border-bottom="true" title-width="500">
    </u-navbar>
    <!--顶部安全距离和导航高度  站位-->
    <view class="top_safe_height" :style="{height: safeAreaTop + 44 + 'px'}"></view>
    <view class="screenshot_tab" :style="{top: safeAreaTop + 44 + 'px'}">
      <u-tabs
          :list="tabslist"
          :is-scroll="false"
          :current="Current"
          @change="Change"
          font-size="26rpx"
          item-width="50%"
          height="100"
          active-color="#FF7A00"
          inactive-color="#999999"
          :active-item-style="{ color: '#FF7A00' }"
          bar-height="10" :bar-style="{bottom: '-10rpx'}" style="width: 100%;"></u-tabs>
    </view>
    <view class="screenshot_content">
      <view class="screenshot_tab_height" :style="{height: tabsHeight + 'px'}"></view>
      <image style="width: 100%;" :src="tupianurl" mode="widthFix"></image>
      <view v-show="typeVal == 3" class="screen_foot">
        <u-button class="screen_btn" @click="screenShot">去获取截图</u-button>
      </view>
    </view>

	</view>
</template>

<script>
  const app = getApp();
	export default {
		data() {
			return {
        imgurlBwc: app.globalData.imgurlBwc,
        safeAreaTop: 0,// 安全区域高度
        tabsHeight: 0, // tabs高度
        scHeight: 0,
        background: {
          background: '#FFFFFF'
        },
				tupianurl: '',
        typeVal: 0, // 1-小红书 2-抖音 3-大众点评 4-美团
        noteType: '', // 笔记类型 note-上传笔记 renzheng-平台认证
        titleText: '标题', // 标题
        Current: 0,
        tabslist: [
          {
            name: '小红书',
            id: 1,
            type: 1,
          }, {
            name: '大众点评',
            id: 2,
            type: 3
          },
         /*  {
            name: '抖音',
            id: 3,
            type: 2
          }, {
            name: '美团',
            id: 4,
            type: 4
          } */
        ],
        imgList: [
          {
            id: 1,
            name: '小红书',
            type: 1,
            noteList: [
                {
                  name: '上传小红书笔记',
                  id: '1-1',
                  noteType: 'note',
                  url: "/teache/xhs_note.png"
                }, {
                  name: '小红书平台认证',
                  id: '1-2',
                noteType: 'renzheng',
                  url: "/teache/xhs_renzheng.png"
                }
            ],
          },
          {
            id: 2,
            name: '大众点评',
            type: 3,
            noteList: [
              {
                name: '上传大众点评笔记',
                id: '2-1',
                noteType: 'note',
                url: "/teache/dzdp_note.png"
              }, {
                name: '大众点评平台认证',
                id: '2-2',
                noteType: 'renzheng',
                url: "/teache/dzdp_renzheng.png"
              }
            ],
          },
          {
            id: 3,
            name: '抖音',
            type: 2,
            noteList: [
              {
                name: '上传抖音笔记',
                id: '3-1',
                noteType: 'note',
                url: "/teache/douyin_note.png"
              }, {
                name: '抖音平台认证',
                id: '3-2',
                noteType: 'renzheng',
                url: "/teache/douyin_renzheng.png"
              }
            ],
          },
          {
            id: 4,
            name: '美团',
            type: 4,
            noteList: [
              {
                name: '上传美团笔记',
                id: '4-1',
                noteType: 'note',
                url: "/teache/mt_note.png"
              }, {
                name: '美团平台认证',
                id: '4-2',
                noteType: 'renzheng',
                url: "/teache/mt_renzheng.png"
              }
            ],
          }
        ],
			}
		},
		onLoad(ops) {
      this.typeVal = ops.type
      this.noteType = ops.noteType
      if (ops.noteType == 'note'){
        this.titleText = '上传笔记截图教程'
      } else {
        this.titleText = '平台认证截图教程'
      }
      console.log('ops==',ops);
      // 获取tabs的高度
      uni.createSelectorQuery().select('.screenshot_tab').boundingClientRect(rect => {
        this.tabsHeight = rect.height
        // console.log('tabsHeight高度==', rect.height)
      }).exec();
      // 安全区域高度
      this.safeAreaTop = uni.getSystemInfoSync().statusBarHeight
    },
    onShow() {
      let that = this
      that.imgList.forEach(function(item, index) {
        if (item.type == that.typeVal) {
          item.noteList.forEach(function(item2, index2) {
            if (item2.noteType == that.noteType) {
              that.tupianurl = that.imgurlBwc + item2.url
              that.Current = item.id - 1
            }
          })
        }
      })
      console.log('tupianurl==',that.tupianurl);
    },
		methods: {
      screenShot(){
        if(this.typeVal == 3){
          uni.navigateToMiniProgram({
            appId: 'wx734c1ad7b3562129',
            path: 'pages/my/my.html',
            extraData: {

            },
            success(res) {
              // 打开成功
              console.log('跳转成功');
            },
            fail(res) {
              // 打开失败
              console.log('跳转失败');
            }
          })
        }

      },
      // tabs切换事件
      Change(item) {
        let that = this
        that.Current = item.index;
        that.imgList.forEach(function(item, index) {
          if (item.id == that.tabslist[that.Current].id) {
            item.noteList.forEach(function(item2, index2) {
              if (item2.noteType == that.noteType) {
                that.tupianurl = that.imgurlBwc + item2.url
                that.Current = item.id - 1
              }
            })
          }
        })
        // 滚动顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 500
        })
      },
      // 监听滚动
      onPageScroll(e) {
        this.scHeight = e.scrollTop
        // console.log('滚动距离==', this.scHeight)
      },
		}
	}
</script>

<style lang="scss">
  .screenshot_tab{
    width: 100%;
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .screenshot_content{
    background: #FDB255;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .screen_foot{
    position: fixed;
    bottom: 10rpx;
    left: 0;
    right: 0;
    padding: 30rpx 50rpx;

    .screen_btn button{
      color: #FFFFFF;
      background: #FF7800;
      border-radius: 50rpx;
      border: none;
    }
    .screen_btn button:after{
      border: none;
    }
  }
</style>
